/**
 *@author wuwg
 *@version 1.0.1
 *@createTime   2019/09/09
 *@updateTime   2019/09/11
 *@description  滚动条组件的less组件
 */
@css-prefix: 'fd-';
@css-prefix-scroll: ~"@{css-prefix}scroll";
@css-prefix-scroll-track-h: ~"@{css-prefix}scroll-track-h";
@css-prefix-scroll-track-v: ~"@{css-prefix}scroll-track-v";
@css-prefix-scroll-bar: ~"@{css-prefix}scroll-bar";
@css-prefix-scroll-area: ~"@{css-prefix}scroll-area";
@css-prefix-scroll-content: ~"@{css-prefix}scroll-content";
@css-prefix-scrollbar-transition: ~"@{css-prefix}scrollbar-transition";
// 过渡动画
.@{css-prefix-scrollbar-transition} {
    // 增加过度动画会导致性能降低 2018-12-21 wuwg
    transition: transform 0.4s ease-in, top 0.4s ease-in;
}

/**
* 垂直滚动条
* 记住容器必须指定容器高（！important） width:400px;height:300px;
*/
.@{css-prefix-scroll} {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    // 划过和正常显示
    &:hover,
    &.show {
        .@{css-prefix-scroll-track-h},
        .@{css-prefix-scroll-track-v} {
            opacity: 1;
        }
    }
    // 【horizontal  and   vertical scrollbar track】
    .@{css-prefix-scroll-track-h}, .@{css-prefix-scroll-track-v} {
        position: absolute;
        z-index: 2;
        opacity: 0;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.1);
        transition: opacity 0.2s ease-in;
        // scrollbar
        .@{css-prefix-scroll-bar} {
            position: absolute;
            border-radius: 5px;
            cursor: default;
            background-color: rgba(0, 0, 0, 0.4);
            // hover
            &:hover {
                background-color: #a8a8a8;
            }
            // presss
            &.pressed, &.pressed:hover {
                background-color: #787878;
            }
        }
    }
    // 【horizontal scrollbar track】
    .@{css-prefix-scroll-track-h} {
        left: 1%;
        bottom: 2px;
        width: 98%;
        height: 6px;
        // horizontal scrollbar
        .@{css-prefix-scroll-bar} {
            height: 100%;
        }
    }

    // 【vertical scrollbar track】
    .@{css-prefix-scroll-track-v} {
        top: 1%;
        right: 2px;
        width: 8px;
        height: 98%;
        // vertical scrollbar
        .@{css-prefix-scroll-bar} {
            width: 100%;
        }
    }
    // 【scrollbar contain】 （area）
    .@{css-prefix-scroll-area} {
        position: relative;
        z-index: 1;
        height: 100%;
        // 关键属性， 容器强制出现滚动条
        overflow: scroll;
        // webkit内核浏览器， 直接隐藏滚动条， 现在发现只有 webkit内核浏览器支持，如：chrome ，safari， opera
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    // 【scroll content contain】
    .@{css-prefix-scroll-content} {
        display: block;
        // 用户可以自己定义内容容器的宽
        // min-width: 1000px;
        // text-align: left;
    }
}

// 测试样式
//.fd-fixepos {
//    position: absolute;
//    top:0;
//    left:0;
//    right:20px;
//    z-index:2;
//    background-color: #fff;
//    border: 1px solid blue;
//}
